<template>
    <view class="main">
      <u-navbar :background="{ backgroundColor: 'rgb(61, 95, 255)' }" title="煤层列表" back-icon-color="#fff"
        title-color="#fff">
        <u-image slot="right" width="40" height="40" src="/static/image/filter.png" @click="goSearch" class="u-m-r-20" />
      </u-navbar>

      <!-- 区县和煤矿筛选 -->
      <customerSearch isCountyName="countyStr" isCountyId="countyNo" isCustomerName="customerName"
        isCustomerId="mineCode" mineUrl="/cjt/common/getCustomerList" countyUrl="/alarm/common/getCountys"
        :getSearchData="searchData" @searchList="searchList"></customerSearch>
        <!-- <u-input v-model="searchData.customerStr" placeholder="请选择煤矿" type="select" @click="cityShow = true"
              :select-open="cityShow" /> -->
      <div class="mine-num">
        煤层数量
        <span  class="mine-num-val">{{ total}}</span>
      </div>

      <scroll-view style="height: 200px;" :scroll-y="true" class="u-flex-1 of-hide" refresher-enabled="true" :refresher-triggered="triggered"
        :refresher-threshold="50" refresher-background="#F5F5F5" @refresherrefresh="onRefresh"
        @scrolltolower="onScrollToLower">
        <view class="list-item" v-for="(item, index) in list" :key="index" @click="toDeails(item)">
          <div class="u-p-20">
            <div class="layerNameBox">
              <span class="list-name">{{ item.layerName }}</span>
              <div class="flex">
              <span class="tag-box" v-if="item.isDanger==='1'">
                  <u-image :src="tuImg"></u-image>
                <span class="tag-item">突</span>
              </span>
              <span class="tag-box" v-if="item.autoigntion==='1'">
                  <u-image :src="ranImg"></u-image>
                <span class="tag-item">燃</span>
              </span>
              <span class="tag-box" v-if="item.dustExplosion==='1'">
                  <u-image :src="baoImg"></u-image>
                <span class="tag-item">爆</span>
              </span>
              <span class="tag-box" v-if="item.impingingDangerous==='1'">
                  <u-image :src="congImg"></u-image>
                <span class="tag-item">冲</span>
              </span>
              <span class="tag-box" v-if="item.waterDamage==='1'">
                  <u-image :src="suiImg"></u-image>
                <span class="tag-item">水</span>
              </span>
              <span class="tag-box" v-if="item.heatDamage==='1'">
                  <u-image :src="reImg"></u-image>
                <span class="tag-item">热</span>
              </span>
            </div>
            </div>
            <div class="u-m-t-20 flex">
                <span class="list-qu m-l-10">{{ item.customerName }}</span>
                <span class="list-qu m-l-10">{{ item.importantCol }}</span>
                <span class="list-qu m-l-10">{{ item.canDiggingSituation }}</span>
            </div>
            <div class="u-m-t-20 flex">
                <div class="list-qu m-r-10 m-l-10"><span>原始地质储量(万吨)</span><span>{{ item.geologyReserves }}</span></div>
                <div class="list-qu"><span>设计可采储量(万吨)</span><span>{{ item.mineReserves }}</span></div>
            </div>
          </div>

        </view>
        <template v-if="!showEmpty">
          <view class="c-empty p-absolute-center">
            <u-empty text="抱歉，暂无相关数据~" :src="require('@/static/image/empty.png')"></u-empty>
          </view>
        </template>
        <view class="p-t-10 p-b-10" v-else>
          <u-loadmore :status="status" />
        </view>
      </scroll-view>
      <u-picker mode="selector" v-model="cityShow" :range="customerList" range-key="label" @confirm="cityConfirm"></u-picker>
    </view>
  </template>

  <script>
  import customerSearch from '@/pages/components/customerSearch.vue'
  import paging from '@/pages/common/paging.js';
  export default {
    mixins: [paging],
    components:{customerSearch},
    data () {
      return {
        tuImg: require('@/static/image/cjt/tu.png'),
        ranImg: require('@/static/image/cjt/ran.png'),
        baoImg: require('@/static/image/cjt/bao.png'),
        congImg: require('@/static/image/cjt/cong.png'),
        suiImg: require('@/static/image/cjt/sui.png'),
        reImg: require('@/static/image/cjt/re.png'),
        emitEvent: 'cjt_mineList',
        total: '',
        searchData: {
          countyNo: "",
          countyStr: "所有区县",
          customerNo: "",
          customerId:'',
          customerName: "",
          customerCode: "",
        },
        cityShow:false,
        customerList:[],
      };
    },
    onLoad (options) {
      this.$set(this.searchData,'mineCode',options.customerId)
      // this.searchData.customerCode = options.customerCode
      this.searchData.customerName = options.customerName
    if (getApp().globalData.userInfo.superviseLevel !== "40") {
      this.searchData.countyNo = getApp().globalData.userInfo.countyNo;
    }else{
      this.searchData.countyNo =options.countyNo
    }
      this.getData();
      // this.getCustomerList()
      uni.$on(this.emitEvent, res => {
      this.searchData = {
        ...this.searchData,
        ...res,
        pageNumber: 1
      }
      this.getData()
    })
    },
    onUnload () {
    // 清除监听
    uni.$off(this.emitEvent);
  },
    methods: {
      cityConfirm (index) {
        this.searchData.customerStr = this.customerList[index].label
        this.searchData.customerId = this.customerList[index].id
        this.getData()
      },
      getCustomerList(){
        this.$get('/cjt/common/getCustomerList?countyNo='+this.searchData.countyNo).then(res=>{
          this.customerList = res.body
        })
      },
      goSearch () {
        const form = {
          ...this.searchData,
        };
        uni.navigateTo({
          url: `./searchList?form=${JSON.stringify(form)}&emitEvent=${this.emitEvent}`,
        });
      },
      toDeails (item) {
        item.countyNo = this.searchData.countyNo
        item.customerName =this.searchData.customerName
        uni.navigateTo({
          url: `./coalDetail?item=${JSON.stringify(item)}`,
        });
      },
      searchList (e) {
        this.searchData = Object.assign(this.searchData, e);
        this.getData();
      },
      async getData () {
        this.$set(this.searchData, "customerId", this.searchData.mineCode);
        const res = await this.$post("/cjt/app/getCustomerCoalPageInfo/", this.searchData);
        if (res && res.body.content) {
          this.list = this.searchData.pageNumber === 1 ? res.body.content : this.list.concat(res.body.content);
          // 到底了
          if (res.body.content.length < this.searchData.pageSize) {
            this.status = "nomore";
          }
          // 数据空
          if (this.searchData.pageNumber === 1 && this.list && this.list.length === 0) {
            this.showEmpty = false;
          } else {
            this.showEmpty = true;
          }

          this.total = res.body.total
        }
      },
    },
  };
  </script>

  <style lang="scss" scoped>
  .list-item {
    box-shadow: 0 0 10px 0 rgba(1, 72, 51, 0.2) !important;
    border-radius: 6px !important;
    position: relative;
    margin: 10px;

    .zcsc {
      background: rgb(74, 220, 172);
      border-radius: 0 6px 6px 0;
      color: #fff;
      font-size: 12px;
      padding: 5px 10px;
      margin-top: 10px;
      display: inline-block
    }

    .list-name {
      font-size: 16px;
      font-weight: 500
    }

    .list-qu {
      color: rgb(102, 102, 102)
    }

    .tag-box {
      background: rgba(255, 67, 0, 0.2);
      display: flex;
      width: 40px;
      margin-right: 10px;
      .tag-item {
        display: block;
        height: 16px;
        width: 100%;
        text-align: center;
        line-height: 16px;
        color: rgb(255, 67, 0);
        font-size: 14px;
      }

      img {
        display: block;
        width: 16px;
        height: 16px;
        margin: 0
      }
    }
  }

  .text-center {
    text-align: center
  }

  .mine-num {
    text-align: center;
    height: 66px;
    background: #fff;
    line-height: 60px;
    color: #fff;
    background: url('/static/image/cjt/cjnxzc.png');
    background-size: 100% 100%;
    margin: 10px;
    margin-top: 0;

    .mine-num-val {
      font-size: 30px;
      margin-left: 10px;
      position: relative;
      top: 2px;
    }
  }

  .jhsc-box {
    display: grid;
    grid-template-columns: 1fr 1fr 1fr;
    grid-gap: 10px;
    padding-top: 10px ;

    .jhsc-name {
      padding: 10px;
    }
  }
  .gzm-zc{
    background: linear-gradient(rgba(10, 207, 151, 0.5),
        rgba(167, 238, 217, 0.5));
  }
  .gzm-jz{
    background: linear-gradient(rgb(255, 158, 80),
    rgb(254, 177, 51));
  }
  .gzm-cxjz{
    background: linear-gradient(rgba(255, 191, 60, 0.5),
    rgba(255, 191, 60, 0.5));
  }
  .gzm-box {

    border-radius: 6px;
    padding-bottom: 3px;

    .gzm-item-bg {
      padding-top: 10px;
      background: #fff;
      margin-left: 3px;
      margin-right: 3px;
      padding-bottom: 10px;
      text-align: center
    }
  }

  .gzm-box-zt {
    background: linear-gradient(rgba(210, 158, 8, 0.5),
        rgba(239, 220, 166, 0.5))
  }

  .gzm-box-kg {
    background: linear-gradient(rgb(204, 239, 255),
        rgba(224, 249, 255, 0.85))
  }

  .gzm-box-jx {
    background: linear-gradient(rgb(255, 158, 80),
        rgb(254, 177, 51))
  }

  .gzm-box-lj {
    background: linear-gradient(rgba(255, 191, 60, 0.5),
        rgba(255, 191, 60, 0.5))
  }
  .u-input{
    flex: none;
      background: #fff;
      border-radius: 15px;
      margin: 10px;
  }
  /deep/ .uni-input-input{
    padding-left:20px;
  }
  .uni-input-placeholder{
      margin-left: 20px;
    }
   /deep/ .u-input__right-icon{
      margin-right: 15px;
    }
    .layerNameBox{
        display: flex;
        justify-content: space-between;
        align-items: center;
        flex-flow: row wrap;
    }
  </style>
